<template>
    <div class="page-container">
        <div class="card split">
            <div>
                <el-input class="card-input" clearable @clear="load" v-model="data.notice.title" placeholder="请输入标题查询"
                    :prefix-icon="Search" @keyup.enter="load"></el-input>
                <el-input class="card-input" clearable @clear="load" v-model="data.notice.content" placeholder="请输入内容查询"
                    :prefix-icon="Search" @keyup.enter="load"></el-input>
                <el-date-picker class="card-input" v-model="data.selectDate" type="daterange" range-separator="至"
                    start-placeholder="请选择开始日期" end-placeholder="请选择结束日期" />
                <el-button class="card-button" type="primary" @click="load">查 询</el-button>
                <el-button class="card-button" @click="reset">重 置</el-button>
            </div>
            <div>
                <el-button class="card-button" type="primary" @click="handleAdd">新 增</el-button>
                <el-button class="card-button" type="danger" @click="deleteBatch">批量删除</el-button>

            </div>
        </div>
        <div class="card">
            <el-table :data="data.tableData" style="width: 100%;"
                :header-cell-style="{ color: '#333', backgroundColor: '#eaf4ff', alignItems: 'center' }"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="title" label="公告标题" />
                <el-table-column prop="content" label="公告内容" min-width="200" />
                <el-table-column prop="author" label="作者" width="150" />
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column prop="updateTime" label="更新时间" />
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-button style="margin-right: 5px;" type="primary" icon="Edit" plain circle
                            @click="handleEdit(scope.row)"></el-button>
                        <el-button type="danger" icon="Delete" plain circle @click="del(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="card">
            <el-pagination v-model:current-page="data.paginationData.pageNum"
                v-model:page-size="data.paginationData.pageSize" :page-sizes="[5, 10, 15, 20]"
                layout="total, sizes, prev, pager, next, jumper" :total="data.paginationData.total" @change="load" />
        </div>
        <el-dialog v-model="data.addDialogparams.dialogVisible" title="系统公告" width="40%" destroy-on-close>
            <el-form :model="data.addDialogparams.form" label-width="80" style="padding: 20px 30px 10px 0;">
                <el-form-item prop="title" label="公告标题">
                    <el-input v-model="data.addDialogparams.form.title" autocomplete="off" placeholder="请输入标题" />
                </el-form-item>
                <el-form-item prop="content" label="公告内容">
                    <el-input v-model="data.addDialogparams.form.content" type="textarea" autocomplete="off"
                        placeholder="请输入公告内容" :rows="8" />
                </el-form-item>
                <el-form-item prop="author" label="作者">
                    <el-input v-model="data.addDialogparams.form.author" autocomplete="off" placeholder="请输入作者" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.addDialogparams.dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="save">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import { reactive } from 'vue';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/store/user';
import {
    noticPageSercive,
    noticeDeleteBatchService,
    noticeDeleteService,
    noticeUpdateService,
    noticeAddService,
} from '@/api/system.js';


const userStore = useUserStore()

const data = reactive({
    user: userStore.getUser(),
    notice: {
        title: null,
        content: null
    },
    selectDate: [],
    paginationData: {
        pageNum: 1,
        pageSize: 5,
        total: 0
    },
    tableData: [],
    addDialogparams: {
        dialogVisible: false,
        form: ""
    },
    multipleSelectionvalue: []

})

const load = async () => {
    const params = {
        pageNum: data.paginationData.pageNum,
        pageSize: data.paginationData.pageSize,
        title: data.notice.title,
        content: data.notice.content,
        begin: data.selectDate[0],
        end: data.selectDate[1]
    }
    const result = await noticPageSercive(params)
    data.tableData = result.list;
    data.paginationData.total = result.total;
}
load()

const reset = () => {
    data.notice = {}
    data.selectDate = {}
    load()
}


const handleSelectionChange = (rows) => {   //  rows是实际选择的数组
    data.multipleSelectionvalue = rows
}

const handleAdd = () => {
    data.addDialogparams.dialogVisible = true
    data.addDialogparams.form = {}
}

const deleteBatch = () => {
    if (data.multipleSelectionvalue.length === 0) {
        ElMessage.warning('请选择需要删除的数据')
        return
    }
    ElMessageBox.confirm(
        '删除后无法恢复，您确认删除所选数据吗?',
        '删除确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async res => {
        const param = data.multipleSelectionvalue.map(item => {
            return {
                id: item.id
            }
        })
        await noticeDeleteBatchService(param)
        ElMessage.success("批量删除成功")
        load()
    })

}

const handleEdit = (row) => {
    data.addDialogparams.form = JSON.parse(JSON.stringify(row))
    data.addDialogparams.dialogVisible = true
}

const del = (id) => {
    ElMessageBox.confirm(
        '删除后无法恢复，您确认删除所选数据吗?',
        '删除确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async res => {
        await noticeDeleteService(id)
        ElMessage.success("删除成功")
        load()
    })
}

const save = () => {
    data.addDialogparams.form.id ? update() : add()
}

const update = async () => {
    const param = {
        id: data.addDialogparams.form.id,
        title: data.addDialogparams.form.title,
        content: data.addDialogparams.form.content,
        author: data.addDialogparams.form.author
    }
    await noticeUpdateService(param)
    ElMessage.success("修改成功")
    load()
    data.addDialogparams.dialogVisible = false
}


const add = async () => {
    const param = {
        title: data.addDialogparams.form.title,
        content: data.addDialogparams.form.content,
        author: data.addDialogparams.form.author
    }
    await noticeAddService(param)
    ElMessage.success("新增成功")
    load()
    data.addDialogparams.dialogVisible = false
}

</script>


<style lang="css"></style>